<template>
    <div class="back"  :style="{'display':   $store.state.load ? 'flex':'none'}">
    <h3 class="info">加载中</h3>
    <div class="anim">
        <span></span>
        <span></span>
        <span></span>
    </div>

</div>

</template>

<script>
export default {
    name: "DataLoading",
    mounted() {
      // this.scrControl()
    },
    methods:{

    }
}
</script>

<style scoped>

.anim, .info{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 5vw;
    height: 2vh;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -5%;
    min-width: 100px;
    min-height: 50px;
}
.info{
    margin-top: -7%;
    color: white;
    font-size: 18px;
    font-weight: bolder;
}
.anim span{
    display: inline-block;
    width: 20px;
    height: 20px;
     background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
    border-radius: 50%;
    margin-left: 10px;
    transform: translateZ(100px);
    animation: zoom 1.4s ease-in-out infinite forwards,beating 1s ease-in-out infinite  ;
   }
.anim span:first-child{
    margin-left: 0;
    animation-delay: 0.16s;

}
.anim span:nth-child(2){
    animation-delay: 0.32s;
}
.anim span:last-child{
    animation-delay: 0.48s;
}
@keyframes zoom{
    0%{
      transform: scale(0);
    }
    40%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}
@keyframes beating{
    0%{
      top: 0;
    }
    40%{
        top: 10px;
    }
    100%{
        top: 0;
    }
}
 .back{
        position: absolute;
       display: none;
        top: 0;
        left: 0;
        z-index: 999999;
        width: 100%;
        height: 100%;
        background: rgba(124, 116, 116, 0.2);

    }
    .back::-webkit-scrollbar {
        display: none;
    }

</style>